﻿@import '/VUD/Style Library/Adres/Styles/Less/vars.less';
li.static.ms-verticalAlignTop.ms-listMenu-editLink.ms-navedit-editArea{
	display: none;
}
#header{
    .header-firts.justify-content-between{
        background: @gov;
        height: 48px;
        display: flex;
        align-items: center;
        img{
            height: 27px;
            width: 134px;
        }
        p{
            margin: 0;
            color: @ligth;
            a{
                font-family: Verdana, Geneva, sans-serif;
                color: @ligth;
                &:first-child{
                    padding-right: 10px;
                }
                &:last-child{
                    padding-left: 10px;
                }
            }
        }
    }
    .header-second{
        background: @gray;
        position: relative;
        top: 82px;
        #menu-sharepoint{
            height: 48px;
            .navbar.navbar-expand-lg{
                padding: 12px;
                #navbarSupportedContent{
                    .ms-core-listMenu-root{
                        padding: 0;

                        li.static{
                        
                            /*margin: 0rem 6rem 0rem 4rem !important;*/
                            margin: 0rem 13rem 0rem 0rem;
                            text-align: center !important;
                            
    						&:first-child{
    							font-weight: 700;
                                position: relative;
                                
                                   /* &::before{
                                        content: " ";
                                        position: absolute;
                                        width: 100%;
                                        height: 3px;
                                        background: #273656;
                                        bottom: -12px;
                                        left: -13px;
                                    }*/

                            }
                            
                            &:nth-child(4) {
                                margin-right: 0 !important;
                            }

                            a{
                                color: @green;
                                font-size: 14px;
                                text-transform: uppercase;
                                font-family: @monserat;
                                font-weight: 600;

                                &:hover {
                                    color:#273656;
                                    position: relative;
                                    text-decoration: none;
                                    

                                    &::before {
                                        content: " ";
                                        position: absolute;
                                        width: 100%;
                                        height: 3px;
                                        background: #273656;
                                        bottom: -12px;
                                    }
                                }
                            }
                            &.selected{
                                a{
                                    font-weight: 700;
                                    position: relative;
                                    color: #273656;
                                    &::before{
                                        content: " ";
                                        position: absolute;
                                        width: 100%;
                                        height: 3px;
                                        background: #273656;
                                        bottom: -12px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .headerthird {
        position: relative;
        top: -48px;
    }
}

/* Header Third */
.header-logo{
	margin-top: 15px;
    margin-bottom: -25px;
    div:last-child{
        text-align: right;
        img{    
        	width: 238px;
        }
    }
}


/* Iconos Accesibilidad */
div#access-bar {
	
    position: fixed;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    top: 280px;
    right: 17px;
    width: 48px;
    height: 144px;
    z-index: 10000;
	color: white;
	background-color: #4E67B4;
    border-radius: 6px 0px 0px 6px;
	
	span{
		display: none !important;
		font-size: 16px !important;
	}
	
}

#access-bar > div div {
    position: relative;
    margin: 5px;
    width: 28px;
    height: 28px;
    background-color: white;
    transition: all 0.2s ease-out;

}

#access-bar> div div img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 15px;
    height: 15px;
}


#access-bar > div:hover {    
    width: 170px;
    background-color: @green;
    box-shadow: 0px 0px 6px #333;
    right: 72px;

    
    span{
        display: block !important;
        left: 35px;
        position: absolute;
        top: 4px;
        color: white;
        white-space: nowrap;
    }
}

#access-bar > div{
    cursor: pointer;
    position: relative;
    margin: 2px;
    transition: all 0.2s ease-out;
}

li{
	list-style: none;
}
 

footer{

	.col-lg-6 .reedes .redes-footer .content-redes div {
	    margin-bottom: 0;
	    color: #fff;
	    display: contents;
	}

	.pre-footer{
	    background-color: #273656;
	    margin-bottom: 30px;
	    margin-top: -37px;
        .subfooter{
            margin: 15px 0;
            position: relative;
            li{
                display: inline-block;
                margin-right: 3%;
                a{
					color: @white !important;
					text-transform: uppercase;
					text-align: center;
                    font: normal normal 600 12px/15px @monserat;
                    display: block;
                }
                &:nth-child(5){
                    position: absolute;
                    right: 18%;
                    top: 5px;
                    a{
                        font-weight: 500;
                    }
                }
                &:nth-child(6){
                    position: absolute;
                    right: 0;
                    top: 5px;
                    a{
                        font-weight: 500;
                    }
                }
            }
        }
	}

	p{
		 margin-bottom: 0rem;

         a {
             color: white !important;
         }
	}
	
    margin: 0;
    font-size: 14px;

	color:  @ligth;
    background: @gov;
    padding: 37px 0;
    
    .col-lg-2{
        border-right: 1px solid @ligth;
        .footer-logos{
			text-align: center;
            li{
                margin-bottom: 20px;
            }
        }
    }
    
    h4{
   	 color:  @ligth;
    }
    
    .col-lg-6{
        border-right: 1px solid @ligth;
        .des{
            .desc-footer{
                h4{
                    color: @ligth;
                    font-size: 16px;
                    margin-bottom: 10px;
                }
                h5{
                    color: @ligth;
                    font-size: 14px;
                }
                p{
                    color: @ligth;
                    margin: 0;
                    font-size: 14px;
				}
				a{
					color: @ligth;
					&:hover{
						text-decoration: none;
						span{
							text-decoration: underline;
							&.icon{
								text-decoration: none;
							}
						}
					}
				}
            }
        }
        .reedes{
        
       		li, p{
        		display: contents !important;
                color: white !important;
        	}
        	
            .redes-footer{
                .content-redes{
                    display: contents;
                    align-items: center;
                    p,li{
                    	 display: contents !important;
                    }
                    
                    
                    div{
                        margin-bottom: 0;
                        color: @ligth;
                    }
                }
            }
        }
    }
    .col-12.col-lg-4{
		.content-des{
			// .icon{
				h4{
					display: inline-block;
				}
			// }
			p{
				a{
					color: @ligth;
					text-decoration: underline;
					&:hover{
						color: @ligth;
					}
				}
			}
		}
        .contac, .info{
                h4{
                    color: #fff;
                    font-size: 16px;
                    margin-bottom: 10px;
                    display: inline-block;
                }
                p {
                    color: #fff;
                    margin: 0;
                    font-size: 14px;
                }
                a{
                    color: #fff;
                    &:hover{
                        color: #fff;
                    }
                }
        }
    }
    // .col-lg-4{
        
    // }
}

.vud{
    #slider{
        // display: flex;
        align-items: center;
        height: auto;
        position: relative;
        .DownloadTitle{
        width: 85vw;
        display: flex;
        align-items: center;
        height: 450px;
        position: absolute;
            h1{
                font-weight: bold;
                color: @green;
                font-family: @monserat;
			    line-height: 39px;
			    font-size: 54px;
            }
            h2{
                color: #79E9E8;
                margin-bottom: 20px;
                font-family: @monserat;
                font-weight: 600;
			    line-height: 39px;
			    font-size: 32px;
            }
            p{
                color: @ligth;
                font-size: 18px;
                font-family: @opens;
            }
        }
        .img-empl{
            width: 100%;
            img{
                width: 100%;
                height: auto;
            }
        }
    }
    h2{
        color: #4E67B4;;
        font-size: 32px;
        margin: 32px 0;
        font-family: @monserat;
        font-weight: bold;
    }
    
  
    .tramites{
        .item-tra-exce{
            padding: 20px;
            background: @green;
            box-shadow: 0px 2px 4px #0000001F;
            height: 370px;

            h3 {
                font-size: 17px;
                color: white;
            }
                
            h4{
                color: @ligth;
                font-size: 18px;
            }
            p{
                color: @ligth;
                font-size: 16px;
                svg{
                    font-size: 30px;
                    color: @ligth;
                }
            }
        }
        .item-tramite{
            box-shadow: 0px 2px 4px #0000001F;

              
    		margin-bottom: 30px;
            &:hover{
                .image-tra{
                    transition: all .5s ease;
                    &::after{
                        content: none;  
                    }
                }
                .conte-trami{
                    background: #f2f2f2;
                }
            }
            .image-tra{
                height: 150px;
                position: relative;
                transition: all .5s ease;
                &::after{
                    content: ""; // ::before and ::after both require content
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: @green;
                    opacity: 0.5;
                    transition: all .5s ease;
                    // transition: all .5s ease;
                    
                }
            }
            .conte-trami{
                padding: 20px;
                transition: all .5s ease;
                p{
                    font: normal normal 600 18px/28px @monserat;
                    color: @azuldark;
                    height: 8rem;
                }
                .col-6{
                    text-align: center;
                    svg{
                        font-size: 30px;
                        color: @azuldark;
                    }
                    .a{
                        fill: @azuldark;  
                    }
                    &:nth-child(2){
                        border-left: 1px solid @azuldark;
                    }
                }
            }
        }
    }
}
.ms-listMenu-editLink{
    display: none !important;
}


/*----/Barra de accesibilidad----*/

/*----Tramites y servicios----*/
.vud .tramites {
    .item-tra-exce {
        p{
            font-size:12px;
        }

        h4 {
            font-size: 15px;
        }

        .row {
            margin-top: 15px !important;

            svg {
            font-size: 22px !important;
            }
        }
    }
}
/*----/Tramites y servicios----*/


@media only screen and (max-width: 768px) {

/*----Barra de accesibilidad----*/
    div #access-bar {
        display: none !important;
    }
}


@media only screen and (min-width: 427px) and (max-width: 768px) {
    .suscrip {
        .contEmail input {
            width: 90%;
        }
    }
}



